<template>
  <div
    ref="line"
    class="e-line"
  >
  </div>
</template>

<script>
export default {
  name: 'ElLine',
  props: {
    'xData': {
      type: Array
    },
    'data': {
      type: Array
    },
    'color': {
      type: Array,
      default () {
        return ['#53e9ee', '#ffe98f', '#315bff', 'aqua', 'blue', 'fuchsia', 'lime', 'maroon', 'navy', 'olive', 'purple', 'silver', 'teal']
      }
    },
    'yName': {
      type: String,
      default: '出勤百分比(%)'
    },
    'max': {
      default: null
    },
    'grid': {
      type: Object,
      default () {
        return {
          top: '20%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        }
      }
    },
    'yPadding': {
      type: Array,
      default () {
        return [0, 0, 0, 20]
      }
    },
    'rotate': {
      type: Number,
      default: 45
    },
    'xSize': {
      type: Number,
      default: 6
    }
  },
  computed: {
    seriesVal () {
      const arr = []
      for (let i = 0, len = this.data.length; i < len; i++) {
        arr.push({
          name: this.data[i].name,
          type: 'line',
          data: this.data[i].value,
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: this.color[i]
              }, {
                offset: 1,
                color: 'rgba(11, 30, 81, 0)'
              }])
            }
          },
          lineStyle: {
            width: 1
          }
        })
      }
      return arr
    }
  },
  watch: {
    'seriesVal': {
      deep: true,
      handler: function () {
        this.draw()
      }
    }
  },
  mounted () {
    this.draw()
    this.$common.winResize(this.$echarts.init(this.$refs.line))
  },
  methods: {
    draw () {
      const $line = this.$echarts.init(this.$refs.line)
      const $this = this
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(7, 23, 71, .8)',
          padding: 10,
          borderColor: '#2c76c0',
          borderWidth: 1,
          textStyle: {
            color: '#45beed'
          }
        },
        color: this.color,
        grid: this.grid,
        xAxis: {
          data: this.xData,
          axisLine: {
            show: false
          },
          axisLabel: {
            rotate: this.rotate,
            textStyle: {
              color: '#536390'
            },
            formatter: function (params) {
              var newParamsName = ''
              var paramsNameNumber = params.length
              var provideNumber = $this.xSize
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
          }
        },
        yAxis: {
          min: 0,
          max: this.max,
          name: this.yName,
          nameTextStyle: {
            color: '#536390',
            padding: this.yPadding
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(57, 121, 211, .5)'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(24, 61, 111, .4)', 'rgba(24, 61, 111, 0)']
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#536390'
            }
          }
        },
        series: this.seriesVal
      }
      if (this.data[0].name !== '') {
        const arr = []
        for (let i in this.data) {
          arr.push(this.data[i].name)
        }
        option.legend = {
          data: arr,
          x: 'right',
          textStyle: {
            color: '#9fade2'
          },
          icon: 'path://M900.93056 300.29824c-41.06752 0-74.4704 33.42848-74.4704 74.49088 0 9.99936 1.99168 19.5328 5.5808 28.25728l-220.2624 205.17888a73.98912 73.98912 0 0 0-41.23136-12.50304c-7.74144 0-15.27296 1.1776-22.4512 3.45088L477.98272 459.53536a74.1376 74.1376 0 0 0 8.14592-33.92c0-41.0624-33.3824-74.49088-74.4448-74.49088s-74.4448 33.42848-74.4448 74.49088c0 3.82464 0.29184 7.6032 0.85504 11.3152l-177.23392 190.28992a73.88672 73.88672 0 0 0-39.79776-11.5968c-41.0624 0-74.4704 33.42336-74.4704 74.49088 0 41.08288 33.408 74.51648 74.4704 74.51648 41.04192 0 74.4192-33.42848 74.4192-74.51648 0-7.61344-1.15712-14.976-3.29216-21.89824L363.6224 482.50368a74.45504 74.45504 0 0 0 76.33408 12.07808l67.38944 136.192a74.16832 74.16832 0 0 0-11.2384 39.4496c0 41.08288 33.3824 74.51648 74.4448 74.51648 41.06752 0 74.4448-33.42848 74.4448-74.51648a74.3424 74.3424 0 0 0-2.72384-19.9168l224.67072-209.26464a73.96352 73.96352 0 0 0 33.99168 8.24832c41.04192 0 74.4192-33.42848 74.4192-74.49088-0.01024-41.06752-33.38752-74.50112-74.42432-74.50112zM121.06752 713.04192a22.91712 22.91712 0 0 1 0-45.82912 22.93248 22.93248 0 0 1 22.87616 22.90176c-0.00512 12.6464-10.28608 22.92736-22.87616 22.92736z m276.31104-269.53728a22.8608 22.8608 0 0 1-8.59136-17.88928 22.9376 22.9376 0 0 1 22.90176-22.90176 22.912 22.912 0 0 1 22.87616 22.90176c0 6.04672-2.31936 11.7248-6.50752 16.01024l-0.19968 0.18432c-9.06752 9.05216-25.04192 6.07744-30.47936 1.69472z m173.17376 249.63584a22.92224 22.92224 0 0 1-22.87616-22.92736 22.7328 22.7328 0 0 1 8.27904-17.62304c0.33792-0.24064 0.68608-0.48128 1.01376-0.7424 0.19968-0.15872 0.38912-0.32256 0.58368-0.49152a22.64064 22.64064 0 0 1 12.99456-4.0448 22.92736 22.92736 0 0 1 22.88128 22.90176 22.9376 22.9376 0 0 1-22.87616 22.92736z m330.37824-295.4496c-12.65152 0-22.90176-10.28096-22.90176-22.90176s10.25024-22.90176 22.90176-22.90176a22.92736 22.92736 0 0 1 22.87104 22.90176 22.92736 22.92736 0 0 1-22.87104 22.90176z'
        }
      }
      $line.setOption(option, true)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .e-line
    width: 100%
    height: 100%
</style>
